import picturePuzzleSprite from "./picturePuzzleSprite";
import { state } from "./state";

class Piece extends cc.Node {
    destPos: cc.Vec2 = cc.v2();
    top: number = null;
    bottom: number = null;
    left: number = null;
    right: number = null;
    constructor(name = 'piece', destPos) {
        super(name);
        this.destPos = destPos;
        // this.top = status.top;
        // this.bottom = status.bottom;
        // this.left = status.left;
        // this.right = status.right;
    }
}
const { ccclass, property } = cc._decorator;

@ccclass
export default class picturePuzzle extends cc.Component {

    ctx: cc.Graphics = null;
    cols: number = 2;
    rows: number = 2;
    // 位置的二维数组
    posList: Array<Array<cc.Vec2>> = [];
    @property(cc.SpriteFrame)
    spriteFrame: cc.SpriteFrame = null;

    /**
     * @param col 垂直列数
     * @param row 水平列数
     */
    onLoad() {
        window['picturePuzzle'] = this;
        // if (CC_PREVIEW) {
        this.initWithFormat(6, 7);
        // }
    }
    touchStart(touch) {
        let node = touch.target;
        // node.position = node.parent.convertToNodeSpaceAR(touch.getLocation());
        node.zIndex = 100;
        node.position.addSelf(touch.getDelta())
        // node.scale
    }
    touchTween: cc.Tween = null;
    touchMove(touch) {
        let node = touch.target;

        let destPos = node.parent.convertToNodeSpaceAR(touch.getLocation());
        node.position = destPos;
    }
    touchEnd(touch) {
        this.touchOver(touch);
    }
    touchCancel(touch) {
        this.touchOver(touch);
    }
    touchOver(touch) {

    }

    registerEvent(node) {
        node.on(cc.Node.EventType.TOUCH_START, this.touchStart, this)
        node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this)
        node.on(cc.Node.EventType.TOUCH_END, this.touchEnd, this)
        node.on(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel, this)
    }
    cancelEvent(node) {
        node.off(cc.Node.EventType.TOUCH_START, this.touchStart, this)
        node.off(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this)
        node.off(cc.Node.EventType.TOUCH_END, this.touchEnd, this)
        node.off(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel, this)
    }
    // 两块三点一间隔
    initWithFormat(cols: number, rows: number) {
        this.cols = cols;
        this.rows = rows;
        let cw = this.node.width;
        let ch = this.node.height;
        let picWidth = cw / this.cols;
        let picHeight = ch / this.rows;

        if (!this.ctx) {
            let ctxNode = new cc.Node('ctxNode');
            ctxNode.parent = cc.director.getScene();
            let ctx = ctxNode.addComponent(cc.Graphics);
            this.ctx = ctx;
        }
        this.ctx.clear();
        for (let i = 0; i < this.rows; i++) {
            this.posList[i] = [];
            for (let j = 0; j < this.cols; j++) {
                // 先处理每一列中的每一行的位置
                let arr = this.posList[i];
                let pos = cc.v2(
                    -cw / 2 + picWidth / 2 + j * picWidth,
                    ch / 2 - picHeight / 2 - i * picHeight
                )
                this.posList[i][j] = pos;

                // let wpos = this.node.convertToWorldSpaceAR(pos);
                // this.ctx.fillColor = cc.color(255, 255, 0);
                // this.ctx.circle(wpos.x, wpos.y, 5);
                // this.ctx.fill();
                // this.ctx.rect(wpos.x - picWidth / 2, wpos.y - picHeight / 2, picWidth, picHeight);
                // this.ctx.stroke();
                // this.ctx.fill();
            }
        }
        console.log(picWidth);
        console.log(picHeight);
        console.log(this.posList);
        this.getPieceNodes();
    }
    pieces: Array<Array<Piece>> = [];
    testArr: Array<Piece> = [];
    // 生成碎片列表
    getPieceNodes() {
        let cw = this.node.width;
        let ch = this.node.height;
        let picWidth = cw / this.cols;
        let picHeight = ch / this.rows;
        for (let i = 0; i < this.rows; i++) {
            this.pieces[i] = [];
            for (let j = 0; j < this.cols; j++) {
                // 先处理每一列中的每一行的位置
                let piece = this.getPiece(i, j);
                this.pieces[i][j] = piece;
                this.registerEvent(piece);
                this.testArr.push(piece);
            }
        }
        // let piece = this.getPiece(1, 1);
        return this.pieces;
    }
    // 获取单个碎片
    getPiece(i, j) {

        let cw = this.node.width;
        let ch = this.node.height;
        let picWidth = cw / this.cols;
        let picHeight = ch / this.rows;

        let piece;
        let isTopExtend = Math.random() > 0.5 ? state.inner : state.outter;
        let isBottomExtend = Math.random() > 0.5 ? state.inner : state.outter;
        let isLeftExtend = Math.random() > 0.5 ? state.inner : state.outter;
        let isRightExtend = Math.random() > 0.5 ? state.inner : state.outter;
        let pos = this.posList[i][j];
        piece = new Piece('piece', pos);
        piece.position = pos;
        console.log('pos', pos)
        let script = piece.addComponent(picturePuzzleSprite);
        // 检测左和上方块，如果是凸的就凹进去，反之亦然
        let topPiece = this.pieces[i - 1] && this.pieces[i - 1][j];
        let leftPiece = this.pieces[i] && this.pieces[i][j - 1];
        // console.log('topPiece', topPiece, leftPiece)
        if (topPiece && topPiece.isValid
            && topPiece instanceof Piece
            && topPiece.getComponent(picturePuzzleSprite)) {
            isTopExtend = topPiece.getComponent(picturePuzzleSprite).bottom == state.inner ? state.outter : state.inner;
        }
        if (leftPiece && leftPiece.isValid
            && leftPiece instanceof Piece
            && leftPiece.getComponent(picturePuzzleSprite)) {
            isLeftExtend = leftPiece.getComponent(picturePuzzleSprite).right == state.inner ? state.outter : state.inner;
        }
        if (i == 0) {
            isTopExtend = state.normal;
        }
        if (i == this.rows - 1) {
            isBottomExtend = state.normal;
        }
        if (j == 0) {
            isLeftExtend = state.normal;
        }
        if (j == this.cols - 1) {
            isRightExtend = state.normal;
        }
        // let
        let status = {
            top: isTopExtend,
            bottom: isBottomExtend,
            left: isLeftExtend,
            right: isRightExtend,
        }

        console.log(i, j, status)
        piece.parent = this.node;
        script.genVerts(this.spriteFrame, i, j, picWidth, picHeight, status, pos, this.node.getContentSize());
        // this.spriteFrame = null;
        return piece;
    }
}
